import { useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ProductCard } from '../components/ProductCard';
import { setPageTitle } from '../lib/utils';

export function Wellness() {
  const wellnessGuidesRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setPageTitle('Wellness');
  }, []);
  
  const scrollToWellnessGuides = () => {
    wellnessGuidesRef.current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  };

  // Mock wellness products data
  const products = [{
    id: 'wl-001',
    title: 'Lavender Sleep Mist',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 92,
    price: 28.0,
    category: 'Wellness'
  }, {
    id: 'wl-002',
    title: 'Relaxation Tea Blend',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1563911892437-1feda0179e1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.7,
    reviewCount: 64,
    price: 24.0,
    category: 'Wellness'
  }, {
    id: 'wl-003',
    title: 'Meditation Cushion',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.9,
    reviewCount: 37,
    price: 58.0,
    category: 'Wellness'
  }, {
    id: 'wl-004',
    title: 'Aromatherapy Diffuser',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.6,
    reviewCount: 83,
    price: 68.0,
    originalPrice: 78.0,
    category: 'Wellness'
  }, {
    id: 'wl-005',
    title: 'Jade Facial Roller',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.7,
    reviewCount: 56,
    price: 32.0,
    category: 'Wellness'
  }, {
    id: 'wl-006',
    title: 'Silk Sleep Mask',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1618517047922-d18a5a36c109?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 42,
    price: 38.0,
    category: 'Wellness'
  }];
  // Wellness guides
  const guides = [{
    id: 'guide-001',
    title: 'Morning Ritual Guide',
    description: 'Start your day with intention and mindfulness. This guide walks you through a complete morning ritual for balance and energy.',
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }, {
    id: 'guide-002',
    title: 'Facial Massage Techniques',
    description: 'Learn the art of facial massage for lymphatic drainage, reduced puffiness, and a natural glow.',
    image: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }, {
    id: 'guide-003',
    title: 'Evening Wind-Down Ritual',
    description: 'Create a peaceful evening routine to promote better sleep and relaxation after a busy day.',
    image: 'https://images.unsplash.com/photo-1470259078422-826894b933aa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }];
  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      <div className="mb-12">
        <h1 className="font-serif text-3xl md:text-4xl text-[#4a4a4a] mb-4">
          Wellness
        </h1>
        <p className="text-sm md:text-base max-w-3xl">
          Discover holistic wellness products and practices that nurture your
          mind, body, and spirit. Our carefully curated collection supports your
          journey to inner balance and outer radiance.
        </p>
      </div>
      {/* Hero Section */}
      <div className="relative rounded-lg overflow-hidden mb-16">
        <div className="h-96 bg-cover bg-center" style={{
        backgroundImage: 'url(https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80)'
      }}></div>
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent flex flex-col justify-center p-8 md:p-12">
          <h2 className="font-serif text-3xl md:text-4xl text-white mb-4 max-w-lg">
            Embrace Your Daily Wellness Ritual
          </h2>
          <p className="text-white/90 text-sm md:text-base mb-6 max-w-lg">
            Wellness is more than a moment—it's a lifestyle. Discover products
            and practices that bring balance to your everyday life.
          </p>
          <button 
            onClick={scrollToWellnessGuides}
            className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors self-start"
          >
            Explore Wellness Guides
          </button>
        </div>
      </div>
      {/* Featured Products */}
      <div className="mb-16">
        <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a] mb-8">
          Wellness Essentials
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {products.map(product => <ProductCard key={product.id} id={product.id} title={product.title} brand={product.brand} image={product.image} rating={product.rating} reviewCount={product.reviewCount} price={product.price} originalPrice={product.originalPrice} category={product.category} />)}
        </div>
      </div>
      {/* Wellness Guides */}
      <div ref={wellnessGuidesRef}>
        <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a] mb-8">
          Wellness Guides
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {guides.map((guide, index) => <div key={index} className="group bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow flex flex-col">
              <div className="h-56 bg-cover bg-center" style={{
            backgroundImage: `url(${guide.image})`
          }}></div>
              <div className="p-6 flex flex-col flex-1">
                <h3 className="font-serif text-xl mb-3 group-hover:text-[#4a6b60] transition-colors">
                  {guide.title}
                </h3>
                <p className="text-sm text-gray-600 mb-4 flex-1">
                  {guide.description}
                </p>
                <Link 
                  to={`/wellness-guide/${guide.id}`}
                  className="text-sm font-medium text-[#4a6b60] hover:text-[#3d5a50] mt-auto"
                >
                  Read the Guide
                </Link>
              </div>
            </div>)}
        </div>
      </div>
    </div>;
}